<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>用户注册页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/time.js"></script>
</head>
<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p id="time"></p>
            </div>
            <div id="topheader">
                <h1 id="title">
                    <a href="login.html">返回登录页面</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>
                注册
            </h1>
            <form method="post" action="">
                <table cellpadding="0" cellspacing="0" border="0"
                       class="form_table">
                    <tr>
                        <td valign="middle" align="right">
                            用户名:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" v-model="user.username"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            真实姓名:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" v-model="user.realname"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            密码:
                        </td>
                        <td valign="middle" align="left">
                            <input type="password" class="inputgri" v-model="user.password"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            性别:
                        </td>
                        <td valign="middle" align="left">
                            男
                            <input type="radio" class="inputgri" value="男" checked="checked" v-model="user.sex"/>
                            女
                            <input type="radio" class="inputgri" value="女" v-model="user.sex"/>
                        </td>
                    </tr>

                    <tr>
                        <td valign="middle" align="right">
                            验证码:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" v-model="code"/>
                        </td>
                        <td>
                            <img id="num" :src="src"/>
                            <a href="javascript:;" @click="getImage">换一张</a>
                        </td>
                    </tr>
                </table>
                <p>
                    <input type="button" class="button" value="注册 &raquo;" @click="register"/>
                </p>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            1453771560@qq.com
        </div>
    </div>
</div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.common.dev.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#wrap",
        data: {
            src: "",
            user: {
                sex: "男"
            },
            code: ""
        },
        methods: {
            getImage() {
                axios.get("http://localhost:8080/user/getImage?" + new Date()).then(request => {
                    this.src = request.data;
                })
            },
            register() {
                axios.post("http://localhost:8080/user/register?code=" + this.code, this.user).then(request => {
                    console.log(request.data);
                    if (request.data.status) {
                        alert(request.data.msg + "点击确定跳转至登录页面");
                        location.href = "login.html";
                    } else {
                        alert(request.data.msg);
                    }
                })
            }
        },
        created() {
            this.getImage();
        }
    })
</script>
